import React, { PureComponent } from 'react'
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { Divider } from '../../widgets'
import {Element} from "rc-banner-anim";

const hzOneImg  = require('../../assets/hezuo/hezuo_1.png')
const hzTwoImg = require('../../assets/hezuo/hezuo_2.png')
const hzThreeImg = require('../../assets/hezuo/hezuo_3.png')
const hzFourImg = require('../../assets/hezuo/hezuo_4.png')
const hzFiveImg = require('../../assets/hezuo/hezuo_5.png')
const hzSixImg = require('../../assets/hezuo/hezuo_6.png')
const hzSevenImg = require('../../assets/hezuo/hezuo_7.png')

const BgElement = Element.BgElement;

export default class extends PureComponent {
  static defaultProps = {
    className: 'content17',
  };

  getDelay = e => e % 3 * 100 + Math.floor(e / 3) * 100 + 300;

  render() {
    const props = { ...this.props };
    const isMode = props.isMode;
    delete props.isMode;
    const oneAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad' };

    const images = [hzOneImg,hzTwoImg,hzThreeImg,hzFourImg,hzFiveImg,hzSixImg,hzSevenImg]

    const children = images.map((v, i) => {
      const delay = this.getDelay(i * 3);
      const liAnim = { opacity: 0, type: 'from', ease: 'easeOutQuad', delay };
      const childrenAnim = { ...liAnim, x: '+=10', delay: delay + 100,};
      return (
        <TweenOne key={i} className="cell" animation={{ ...childrenAnim}}>
          <img className="cellImg" src={v} />
        </TweenOne>
      )
    })

    return (
      <div {...props} className={`content-template-wrapper ${props.className}-wrapper`}>
        <OverPack
          className={`content-template ${props.className}`}
          playScale="0.4"
          location={props.id}
        >
          <TweenOne
            key="h1"
            animation={oneAnim}
            component="div"
            className={`${props.className}-tit`}
          >
            <div className={`${props.className}-tit-t`}>合作单位</div>
            <Divider style={{backgroundColor: '#5bb3fa'}}/>
          </TweenOne>
          <div key="ul" className={`${props.className}-contentWrapper`}>
            {
              children
            }
          </div>
        </OverPack>
      </div>
    )
  }
}
